<template>
  <h4 class="title">
    <span class="point" :style="{ background: background }"></span>
    <span class="title-name" :style="{ color: color }">{{ name }}</span>
    <slot></slot>
  </h4>
</template>
<script>
export default {
  props: {
    background: {
      type: String,
      default: '#007AE6'
    },
    color: {
      type: String,
      default: '#292E33'
    },
    name: {
      type: String,
      default: ''
    },
  }
}
</script>
<style lang="less" scoped>

// @color-block: #292E33;
// @color-blue: #007AE6;

.title {
  height: 24px;
  padding: 0 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  .point {
    width: 3px;
    height: 15px;
    border-radius: 2px;
    // background: @color-blue
  }
  .title-name {
    flex: 1;
    // color: @color-block;
    font-size: 16px;
    font-weight: bold;
    vertical-align: top;
    padding-left: 6px;
  }
}
</style>

